{% extends "layout.html" %}

{% block title %}股票列表 - 股票实时AI分析系统{% endblock %}

{% block content %}
<h1 class="mb-4">监控股票列表</h1>

<div class="row">
    {% for stock in stocks %}
    <div class="col-md-6">
        <div class="card stock-card mb-4">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">{{ stock.name }} ({{ stock.code }})</h5>
                {% if stock.price %}
                <div>
                    <span class="fw-bold">{{ stock.price }}</span>
                    <span
                        class="ms-2 {% if stock.change > 0 %}price-up{% elif stock.change < 0 %}price-down{% endif %}">
                        {{ stock.change }}%
                    </span>
                </div>
                {% endif %}
            </div>
            <div class="card-body">
                <h6 class="card-subtitle mb-2 text-muted">最新分析</h6>
                <p class="card-text">{{ stock.summary[:200] }}{% if stock.summary|length > 200 %}...{% endif %}</p>

                <div class="d-flex justify-content-between align-items-center mt-3">
                    <div>
                        <h6 class="mb-0">策略建议</h6>
                        <p class="mb-0">
                            {{ stock.strategy|capitalize }}
                            {% if stock.confidence %}
                            <span class="badge bg-secondary">
                                {{ stock.confidence|capitalize }}
                            </span>
                            {% endif %}
                        </p>
                    </div>
                    <a href="/stock/{{ stock.code }}" class="btn btn-primary">详情</a>
                </div>
            </div>
            <div class="card-footer text-muted">
                <small>最后更新: {{ stock.last_updated }}</small>
                <button class="btn btn-sm btn-outline-primary float-end btn-analyze"
                    data-stock="{{ stock.code }}">分析</button>
            </div>
        </div>
    </div>
    {% endfor %}
</div>
{% endblock %}